import React, { useEffect, useState } from "react";
import QueueAnim from "rc-queue-anim";
import TweenOne from "rc-tween-one";
import { Row, Col } from "antd";

import OverPack from "rc-scroll-anim/lib/ScrollOverPack";
import {
  childrenCloRender,
  childrenSideRender,
  getChildrenRender,
  getChildrenToRender,
} from "@/utils";

import "./ContentCenter.less";
const ContentCenter = (props: any) => {
  const box: any = document.querySelector("body");
  const { ...tagProps } = props;
  const { dataSource } = tagProps;
  const [isMobile, setIsMobile] = useState<boolean>(false);
  const animType = {
    queue: "right",
    one: {
      x: "-=30",
      opacity: 0,
      type: "from",
      ease: "easeOutQuad",
    },
  };
  useEffect(() => {
    const resizeObserver = new ResizeObserver(() => {
      setIsMobile(box?.clientWidth <= 752);
    });
    resizeObserver.observe(box);
  }, []);
  return (
    <div {...tagProps} {...dataSource.wrapper}>
      <OverPack {...dataSource.OverPack} component={Row}>
        <div {...dataSource.titleWrapper}>
          {dataSource.titleWrapper.children.map(getChildrenRender)}
        </div>
        <QueueAnim
          key="text"
          type={animType.queue}
          leaveReverse
          delay={300}
          ease={["easeOutQuad", "easeInQuad"]}
          {...dataSource.textWrapper}
        >
          {!isMobile
            ? dataSource.childWrapper.children.map((block) => {
                const { children: item, ...blockProps } = block;
                return <div {...item}>{childrenSideRender(item.children)}</div>;
              })
            : dataSource.childWrapper.children.map((block) => {
                const { children: item, ...blockProps } = block;
                return (
                  <div {...item} className={"content-center-flex-item "}>
                    {childrenCloRender(item.children)}
                  </div>
                );
              })}
        </QueueAnim>
      </OverPack>
    </div>
  );
};
export default ContentCenter;
